<!doctype html>
<html><head>
	<!-- Basic Page Needs -->
        <meta charset="utf-8">
        <title>Appcorner - Checkout</title>
        <meta name="description" content="A Template by Gozha.net">
        <meta name="keywords" content="HTML, CSS, JavaScript">
        <meta name="author" content="Gozha.net">

  
    <!-- Mobile Specific Metas-->
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta content="telephone=no" name="format-detection">
    
    <!-- Fonts -->
        <!-- SourceSansPro -->
        <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic' rel='stylesheet' type='text/css'>
        <!-- Icomoon -->
        <link href="css/icomoon.css" rel="stylesheet" />
        <!--  Font awesome 4-->
        <link href="css/font-awesome.css" rel="stylesheet" />
    
    <!-- Stylesheets -->
    	
        <!-- Bootstrap 3 -->
    	<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet" />
        <!-- Mobile navigation menu-->
        <link href="css/gozha-nav.css" rel="stylesheet" />

      <!-- Page specific Stylesheets-->
        <!-- Pagination -->
        <link rel="stylesheet" href="css/jPages.css">
        <!-- Gallery change page amination -->
        <link rel="stylesheet" href="css/animate-switch.css">

        <!-- Selectbox -->
        <link href="css/jquery.selectbox.css" rel="stylesheet" />
        
        <!-- Custom -->
        <link href="css/base.css?v=1" rel="stylesheet" />
        <link href="css/style.css?v=1" rel="stylesheet" />
		
		<!-- Basic JavaScript-->
		<!-- Modernizr -->
		<script src="js/modernizr.custom.05768.js"></script>
    
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!--[if lt IE 9]> 
    	<script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.js"></script> 
		<script src="http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.3.0/respond.js"></script>		
    <![endif]-->
 
</head>

<body class='support'>
    <div class='wrapper'>
        <header class='header'>
            <div class='container'>
                <p class='call-number'>You can just call us <span>+1-888-555-5555</span></p>
                <!-- social icon -->
                <ul class='social-icon pull-right'>
                    <li><a href="#"><i class='icon-instagram'></i></a></li>
                    <li><a href="#"><i class='icon-dribbble'></i></a></li>
                    <li><a href="#"><i class='icon-tumblr'></i></a></li>
                    <li><a href="#"><i class='icon-linkedin'></i></a></li>
                    <li><a href="#"><i class='icon-pinterest'></i></a></li>
                    <li><a href="#"><i class='icon-googleplus'></i></a></li>
                    <li><a href="#"><i class='icon-facebook'></i></a></li>
                    <li><a href="#"><i class='icon-twitter'></i></a></li>
                </ul><!-- end of social icon list -->

                <div class='top-navigation'>
                    <div class="navigation-front">
                        <a href="index.html" class='logo'>AppCorner</a>
                        <div id="navigation-box">
                            <a href="#" id="navigation-toggle">
                                <span class="menu-icon"></span></span>
                            </a> 
                            <ul id="navigation" class="hover-link">
                            <li>
                                <span class="sub-nav-toggle plus"></span>
                                <a href="#" data-hover='Home'>Home</a>
                                <ul>
                                    <li><a href="homepage1.html">Revolution Slider</a></li>
                                    <li><a href="homepage2.html">OneByOne Slider</a></li>
                                    <li><a href="homepage3.html">BxSlider</a></li>
                                    <li><a href="homepage4.html">FlexSlider</a></li>
                                    <li><a href="full-width-slider.html">Full Width</a></li>
                                    <li><a href="index.html">Video Slider</a></li>

                                </ul>
                            </li>
                            <li>
                                <span class="sub-nav-toggle plus"></span>
                                <a href="#" data-hover='Pages' class='active'>Pages</a>
                                <ul>
                                    <li><a href="about.html">About</a></li>
                                    <li><a href="single-employee.html">Single employee</a></li>
                                    <li><a href="service.html">Services</a></li>
                                    <li><a href="single-service.html">Single service</a></li>
                                    <li><a href="price.html">Price</a></li>
                                    <li><a href="page-element.html">Page elements</a></li>
                                    <li><a href="typography.html">Typography</a></li>
                                    <li><a href="icon-font-1.html">Icons - Font awesome</a></li>
                                    <li><a href="icon-font-2.html">Icons - Icomoon</a></li>
                                    <li><a href="login.html">Login</a></li>
                                    <li><a href="support.html">Support</a></li>
                                    <li><a href="coming-soon.html">Coming soon</a></li>
                                    <li><a href="404.html">404 error</a></li>

                                </ul>
                            </li>

                            <li class="visible-lg">
                               <span class="sub-nav-toggle plus"></span>
                               <a href="#" data-hover='Mega Menu'>Mega Menu</a>
                               <ul class="mega-menu">
                                  <li class="col-md-6">
                                    <div class="mega-menu-text">
                                        <h4>About Us</h4>
                                        <div class="image-wrap">
                                           <img alt='' src="http://placehold.it/420x420">
                                        </div>
                                        <div>
                                            <p>Morbi sit amet erat ut purus sagittis rutrum. Quisque ac porttitor massa. Maecenas sem magna, dignissim eu venenatis nec, cursus quis massa. 
                                                <br>
                                                <br>
                                            Sed et est tempor mi mollis suscipit sit amet et nulla. Morbi fringilla, quam eget blandit ornare, ipsum metus volutpat felis, eget cursus eros nulla nec purus.</p>        
                                        </div>
                                      </div>
                                  </li>
                                  <li class="col-md-6">
                                    <div class="mega-menu-item">
                                      <ul class="col-md-3">
                                        <li class="heading"><h4>Pages</h4></li>
                                        <li><a href="index.html">Home</a></li>
                                        <li><a href="about.html">About</a></li>
                                        <li><a href="single-employee.html">Single employee</a></li>
                                        <li><a href="service.html">Services</a></li>
                                        <li><a href="single-service.html">Single service</a></li>
                                        <li><a href="price.html">Price</a></li>
                                        <li><a href="page-element.html">Page elements</a></li>
                                      </ul>

                                      <ul class="col-md-3">
                                        <li class="empty"><div></div></li>
                                        <li><a href="typography.html">Typography</a></li>
                                        <li><a href="icon-font-2.html">Icons</a></li>
                                        <li><a href="coming-soon.html">Coming soon</a></li>
                                        <li><a href="404.html">404 error</a></li>
                                        <li><a href="login.html">Login</a></li>
                                        <li><a href="support.html">Support</a></li>
                                        <li><a href="contact.html">Contact</a></li>
                                      </ul>

                                      <ul class="col-md-3">
                                        <li class="heading"><h4>Gallery</h4></li>
                                        <li><a href="gallery-random.html">Random</a></li>
                                        <li><a href="gallery-three-columns.html">3 columns</a></li>
                                        <li><a href="gallery-two-columns.html">2 columns</a></li>
                                      </ul>

                                      <ul class="col-md-3">
                                        <li class="heading"><h4>Blog</h4></li>
                                        <li><a href="blog-style-one.html">Style 1</a></li>
                                        <li><a href="blog-style-two.html">Style 2</a></li>
                                        <li><a href="blog-style-three.html">Style 3</a></li>
                                        <li><a href="single-post.html">Post</a></li>
                                        <li><a href="single-post-two.html">Post style 2</a></li>
                                      </ul>
                                      </div>
                                  </li>
                               </ul>
                            </li>
                            <li>
                                <span class="sub-nav-toggle plus"></span>
                                <a href="gallery-random.html" data-hover='Gallery'>Gallery</a>
                                <ul>
                                    <li><a href="gallery-random.html">Gallery random</a></li>
                                    <li><a href="gallery-three-columns.html">Gallery 3 columns</a></li>
                                    <li><a href="gallery-two-columns.html">Gallery 2 columns</a></li>
                                    <li><a href="gallery-three-columns-iso.html">Gallery 3 columns sorted</a></li>
                                    <li><a href="gallery-two-columns-iso.html">Gallery 2 columns sorted</a></li>
                                </ul>
                            </li>
                            <li>
                                <span class="sub-nav-toggle plus"></span>
                                <a href="blog-style-one.html" data-hover='Blog'>Blog</a>
                                <ul>
                                    <li><a href="blog-style-one.html">Blog style 1</a></li>
                                    <li><a href="blog-style-two.html">Blog style 2</a></li>
                                    <li><a href="blog-style-three.html">Blog style 3</a></li>
                                    <li><a href="blog-audio.html">Audio blog</a></li>
                                    <li><a href="blog-video.html">Video blog</a></li>
                                    <li><a href="single-post.html">Single post</a></li>
                                    <li><a href="single-post-two.html">Single post style 2</a></li>
                                </ul>
                            </li>
                            <li>
                                <span class="sub-nav-toggle plus"></span>
                                <a href="shop-sidebar.html" data-hover='Shop'>Shop</a>
                                <ul>
                                    <li><a href="shop-sidebar.html">Shop with sidebar</a></li>
                                    <li><a href="shop-full.html">Shop fullwidth</a></li>
                                    <li><a href="single-product-sidebar.html">Single product sidebar</a></li>
                                    <li><a href="single-product-full.html">Single product fullwidth</a></li>
                                    <li><a href="checkout.html">Checkout</a></li>
                                    <li><a href="shopping-cart.html">Shopping cart</a></li>
                                </ul>
                            </li>
                            <li><a href="contact.html" data-hover='Contact'>Contact</a></li>
                        </ul>
                        </div>
                    </div>
                </div>

                <div class='main-zone'>
                  <div class="corner"></div>
                  <div class='corner-line'></div>
                    
                   <div class='current-page'>
                      <hr class="top-devider" />
                        <h1>Checkout</h1>
                        <ol class="breadcrumb">
                          <li><a href="index.html">home</a></li>
                          <li><a href="shop-sidebar.html">shop</a></li>
                          <li><a href="single-product-sidebar.html">single product</a></li>
                          <li class="active">checkout</li>
                        </ol>
                   </div>
                </div>
            </div>
        </header>

        <section class="container waypoint" data-animate-up="nav-strict" data-animate-down="nav-show">
            <div class="col-sm-8">
                <!-- faqs type accordion-->
            <div class='accordion-second accordione--step'>
                 <div class="panel-group" id="accordion-two">
                  <div class="panel panel-default">
                    <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion-two" href="#collapseFirst">
                          <div class="marker">
                              <span class="custom1">+</span>
                              <span class="custom2">-</span>
                          </div>
                          Shipping Method 
                          <span class="step__number">1</span>
                        </a>
                      </h4>
                    </div> <!-- end panel heading-->
                    <div id="collapseFirst" class="panel-collapse collapse in">
                      <div class="panel-body">
                        <div class="check__item">
                          <input type='checkbox' id='#informed' class='styled'>
                          <label for='#informed' class='check-info'>UPS Worldwide Express</label>
                        </div>
                        
                        <div class="check__item">
                          <input type='checkbox' id='#informed' class='styled'>
                          <label for='#informed' class='check-info'>FedEx</label>
                        </div>
                        
                        <div class="check__item">
                          <input type='checkbox' id='#informed' class='styled'>
                          <label for='#informed' class='check-info'>Airmail Priority </label>
                        </div>
                        
                        <div class="check__item">
                          <input type='checkbox' id='#informed' class='styled'>
                          <label for='#informed' class='check-info'>TNT</label>
                        </div>
                        
                        <div class="check__item">
                          <input type='checkbox' id='#informed' class='styled'>
                          <label for='#informed' class='check-info'>USA Free Mail </label>
                        </div>

                        <a href="#" class="read-more checkout-next" data-page='page2'>continue</a>
                      </div><!-- end panel-body-->
                    </div><!-- end collapse part-->
                  </div> <!-- end panel-->
                  
                  <div class="panel panel-default page2">
                    <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion-two" href="#collapseSecond" class='collapsed'>
                          <div class="marker">
                              <span class="custom1">+</span>
                              <span class="custom2">-</span>
                          </div>
                          Shipping Address & Contact Info
                          <span class="step__number">2</span>
                        </a>
                      </h4>
                    </div><!-- end panel heading-->
                    <div id="collapseSecond" class="panel-collapse collapse">
                      <div class="panel-body">
                        <form>

                            <input type='text' placeholder='first name' class="input-field">
                            <input type='text' placeholder='last name' class="input-field">
                            <input type='emai;' placeholder='email' class="input-field">
                            <input type='tel' placeholder='phone number' class="input-field">
                            
                            <div class="product-control product-control--inform">
                            <select name="sorting_county" class="product-control__sort product-control__sort-country" tabindex="0">
                                <option value="0">country</option>
                                <option value="1">United States</option>
                                <option value="2">Canada</option>
                                <option value="3">Germany</option>
                                <option value="4">France</option>
                            </select>

                            <select name="sorting_city" class="product-control__sort " tabindex="0">
                                <option value="0">city</option>
                                <option value="1">London</option>
                                <option value="2">Toronto</option>
                                <option value="3">Berlin</option>
                                <option value="4">Paris</option>
                            </select>
                            </div>

                            <input type='text' placeholder='address' class="input-field input-field--full">
                          
                            <a href="#" class="read-more checkout-next" data-page='page3'>continue</a>
                        </form>

                        
                      </div><!-- end panel-body-->
                    </div><!-- end collapse part-->
                  </div> <!-- end panel-->
                  
                  <div class="panel panel-default page3">
                    <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion-two" href="#collapseThird" class='collapsed'>
                          <div class="marker">
                              <span class="custom1">+</span>
                              <span class="custom2">-</span>
                          </div>
                         Payment Method
                         <span class="step__number">3</span>
                        </a>
                      </h4>
                    </div><!-- end panel heading-->
                    <div id="collapseThird" class="panel-collapse collapse">
                      <div class="panel-body">
                        <div class="check__item">
                          <input type='checkbox' id='#informed' class='styled'>
                          <label for='#informed' class='check-info'>Direct Bank Transfer</label>
                        </div>
                        
                        <div class="check__item">
                          <input type='checkbox' id='#informed' class='styled'>
                          <label for='#informed' class='check-info'>Cheque Payment</label>
                        </div>
                        
                        <div class="check__item">
                          <input type='checkbox' id='#informed' class='styled'>
                          <label for='#informed' class='check-info'>Paypal</label>
                        </div>
                        
                        <div class="check__item">
                          <input type='checkbox' id='#informed' class='styled'>
                          <label for='#informed' class='check-info'>Other</label>
                        </div>

                        <a href="#" class="read-more checkout-next" data-page='page4'>continue</a>
                      </div><!-- end panel-body-->
                    </div><!-- end collapse part-->
                  </div> <!-- end panel-->

                  <div class="panel panel-default page4">
                    <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion-two" href="#collapseFour" class='collapsed'>
                          <div class="marker">
                              <span class="custom1">+</span>
                              <span class="custom2">-</span>
                          </div>
                         Items Review
                         <span class="step__number">4</span> 
                        </a>
                      </h4>
                    </div><!-- end panel heading-->
                    <div id="collapseFour" class="panel-collapse collapse">
                      <div class="panel-body">
                        <table class="table table-bordered table--list">
                            <colgroup class="col-wide">
                            <colgroup class="col-thin">
                            <colgroup class="col-thin">
                            <colgroup class="col-thin">
                          
                          <thead>
                              <tr>
                                  <th>Product</th>
                                  <th>Price</th>
                                  <th>Quantity</th>
                                  <th>total</th>
                              </tr>
                          </thead>
                          <tbody>
                            <tr>
                                <td class="table__item">
                                <div>
                                  <img alt='' src="http://placehold.it/50x50" class="product__thumb">
                                  <p class="product__shortname">Laptop NX3452</p>
                                  <img alt='' src="images/stars.svg" class="product__star">
                                </div> 
                                </td>
                                <td>$ 199</td>
                                <td>1</td>
                                <td>$ 199</td>
                              </tr>
                              <tr>
                                <td class="table__item">
                                <div>
                                  <img alt='' src="http://placehold.it/50x50" class="product__thumb">
                                  <p class="product__shortname">Laptop DS4350 Mini</p>
                                  <img alt='' src="images/stars.svg" class="product__star">
                                </div> 
                                </td>
                                <td>$ 99</td>
                                <td>1</td>
                                <td>$ 99</td>
                              </tr>
                              <tr>
                                <td class="table__item">
                                <div>
                                  <img alt='' src="http://placehold.it/50x50" class="product__thumb">
                                  <p class="product__shortname">Laptop S09</p>
                                  <img alt='' src="images/stars.svg" class="product__star">
                                </div> 
                                </td>
                                <td>$ 300</td>
                                <td>1</td>
                                <td>$ 300</td>
                              </tr>

                              <tr>
                                <td class="checkout__result">Present</td>
                                <td>$ 0.99</td>
                                <td>1</td>
                                <td>$ 0.99</td>
                              </tr>
                              <tr>
                                <td class="checkout__result">Discount</td>
                                <td></td>
                                <td>10 %</td>
                                <td>- $ 59.9</td>
                              </tr>
                              <tr>
                                <td class="checkout__result">Shipping</td>
                                <td></td>
                                <td></td>
                                <td>0</td>
                              </tr>  
                          </tbody>
                         </table>

                         <table class="table-info">
                            <colgroup class="col-wide">
                            <colgroup class="col-wider">

                             <tr>
                                <td class="checkout__result">Promo code:</td>
                                <td><input type='text' placeholder='enter your promo code' class="input-field input-field--all"></td>
                              </tr>
                              <tr>
                                <td class="checkout__result">Order total:</td>
                                <td class="checkout__total">$ 500</td>
                              </tr>
                          </table>
                            
                          <div class="order-btn">
                            <a class='btn btn-lg btn-success btn-addcart'><i class='icon-cart'></i>place order</a>
                          </div>
                          

                      </div><!-- end panel-body-->
                    </div><!-- end collapse part-->
                  </div> <!-- end panel-->

              </div><!-- end panel group-->
            </div> <!-- end faqs accordion-->

            </div>

            <aside class="col-sm-4">
                <div class="sitebar">
                    <div class='works-decript works-descript--sidebar'>
                        <h3>cart totals</h3>
                        <table class="table--short">
                          <colgroup class="col-twopart">
                          <colgroup class="col-onepart">
                          <tr>
                            <td>Cart subtotal:</td>
                            <td class="checkout__result">$599</td>
                          </tr>
                          <tr>
                            <td>Shipping:</td>
                            <td class="checkout__result">Free</td>
                          </tr>
                          <tr>
                            <td>Discount:</td>
                            <td class="checkout__result">-10%</td>
                          </tr>
                          <tr>
                            <td>Promocode:</td>
                            <td class="checkout__result">SALE2014</td>
                          </tr>
                        </table>

                        <div class="checkout__sum">$ 500</div>
                    </div>

                    <div class="additional-info">
                      <p class="additional-info__title">You can edit your account:</p>
                      <ul class="list-control">
                        <li><a href="#">connected credit cards</a></li>
                        <li><a href="#">shipping addresses</a></li>
                        <li><a href="#">login/password</a></li>
                    </div>

                    <div class="additional-info">
                      <p class="additional-info__title">Additional info:</p>
                      <ul class="style-five list--padding">
                        <li><a href="#">FAQs</a></li>
                        <li><a href="#">Shipping &amp; Return</a></li>
                        <li><a href="#">Safe Shipping Guarantee</a></li>
                    </ul>
                    </div>
                </div>
            </aside>
        </section>

        <footer class='footer'>
            <div class='container'>
                <div class='col-sm-8 col-md-8 col-lg-8'>
                    <h2>Contact info</h2>
                    <p class="footer-info">Vivamus vel lacus eu nunc vehicula ultricies vel vulputate dui. Mauris vehicula mollis mi. Quisque aliquam porta magna, at bibendum magna tempor eget. Donec consequat ipsum in nibh consequat id suscipit libero bibendum. Sed elementum imperdiet magna, convallis dapibus turpis ultricies eu.</p>
                    <div class='col-xs-4 col-sm-4 col-md-3 col-lg-3 contact-info'>
                        <h4><i class='icon-location'></i>Address</h4>
                        <p>V101 West Street, New
                        <br/> 
                        York, NY 12345</p>
                    </div>
                    <div class='col-xs-4 col-sm-4 col-md-3 col-lg-3 contact-info'>
                        <h4><i class='icon-mail'></i>Email</h4>
                        <p>
                        appcorner@gmail.com
                        <br/> 
                        help@appcorner.com</p>
                    </div>
                    <div class='col-xs-4 col-sm-4 col-md-3 col-lg-3 contact-info'>
                        <h4><i class='icon-mobile'></i>Phone</h4>
                        <p>+ 44 1225 324 980
                        <br/> 
                        + 44 1225 324 980</p>
                    </div>
                   
                    <div class='col-sm-12 col-md-12 col-lg-12'>
                        <ul class='social-icon pull-left'>
                            <li><a href="#"><i class='icon-instagram'></i></a></li>
                            <li><a href="#"><i class='icon-dribbble'></i></a></li>
                            <li><a href="#"><i class='icon-tumblr'></i></a></li>
                            <li><a href="#"><i class='icon-linkedin'></i></a></li>
                            <li><a href="#"><i class='icon-pinterest'></i></a></li>
                            <li><a href="#"><i class='icon-googleplus'></i></a></li>
                            <li><a href="#"><i class='icon-facebook'></i></a></li>
                            <li><a href="#"><i class='icon-twitter'></i></a></li>
                        </ul>
                    </div>
                </div>

                <div class='col-sm-4 col-md-4 col-lg-4 mobile-clear'>
                    <h2>Drop us a line</h2>
                    <!-- contact form inputs-->
                    <form id="contact-form" novalidate="" name="contact-form" method="post" >
                        <input type='email' name='user-email' placeholder='Email'>
                        <textarea name="user-message" placeholder="Message"></textarea>
                        <button type="submit" class='btn btn-large btn-success btn-form icon-circled-right btn-animate'>submit</button>
                    </form><!-- end contact form inputs -->
                </div>

                <div class='clearfix'></div>
                <div class='container devider'></div>

                <p class='copy'>© Appcorner, 2013. All rights reserved. Done by Olia Gozha</p>

            </div>
        </footer>
    </div>



    <!-- JavaScript-->
        <!-- jQuery 1.9.1--> 
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/jquery-1.10.1.min.js"><\/script>')</script>
        <!-- Bootstrap 3--> 
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
        <!-- Migrate --> 
        <script src="js/jquery-migrate-1.2.1.min.js"></script>
        <!-- Event that will trigger when the element is scrolled in to the viewport.--> 
        <script type="text/javascript" src="js/jquery.inview.js"></script>
        <!-- Mobile navigation menu-->
        <script src="js/jquery.mobile.menu.js"></script>
        <!-- Form -->
        <script src="js/jquery.form.js"></script>
        <!-- Waypoint -->
        <script src="js/waypoints.min.js"></script>

      <!-- Page specific scritpts-->
        <!-- Form element -->
        <script src="js/form-element.js"></script>
        <!-- Selectbox -->
        <script src="js/jquery.selectbox-0.2.min.js"></script>


        <!-- Custom -->
        <script src="js/custom.js"></script>


        <script type="text/javascript">
            $(document).ready(function() {
                initCheckout();
            });
        </script>

</body>